<template>
  <a-card :bordered="false">
    <a-form
      ref="form"
      :model="form"
      :label-col="{ md: { span: 0 }, sm: { span: 24 } }"
      :wrapper-col="{ md: { span: 24 }, sm: { span: 24 } }"
    >
        <a-tabs size="small" class="monitor-card-tabs">
          <a-tab-pane tab="常规流程" key="thisYear1">
              <a-form-item label="">
                <tinymce v-model="form.content" :init="{height:700}"></tinymce>
              </a-form-item>
          </a-tab-pane>
          <a-tab-pane tab="延期流程" key="thisYear2">
              <a-form-item label="">
                <tinymce v-model="form.content2" :init="{height:700}"></tinymce>
              </a-form-item>
          </a-tab-pane>
        </a-tabs>

    </a-form>
    <!-- 底部工具栏 -->
    <div class="ele-bottom-tool">
      <div class="ele-bottom-tool-actions">
        <a-button type='primary' @click='updateProtocol'>确定</a-button>
      </div>
    </div>
  </a-card>
</template>

<script>
import { ProtocolApi } from '@/api/ProtocolApi';
import Tinymce from '@/components/TinymceEditor/index.vue';

export default {
  name: 'protocol',
  components: { Tinymce },

  data() {
    return {
      form: {
        content: '',
        content2: ''
      }
    };
  },

  // 初始化方法to
  async created() {
    const res = await ProtocolApi.findFlowDetail({});
    this.form.content = res.data.content;
    this.form.content2 = res.data.content2;
  },

  methods: {
    /**
     * 保存
     */
    async updateProtocol() {
      let result = null;
      result = ProtocolApi.editFlow(this.form);
      result
        .then(result => {
          // 提示添加成功
          this.$message.success(result.message);
        })
        .catch(() => {
          this.loading = false;
        });
    }
  }
};
</script>

<style scoped>
/*禁用调整大小*/
/deep/.tox-statusbar__resize-handle {
  visibility: hidden;
}
</style>
